<template>
	<view>
		<view>
			<view class="role" v-if="role != 0" @tap="goStore()">{{ text }}</view>
			<view class="role" v-if="role == 0" @tap="goStore()">{{ text }}</view>
			<view class="head_bg"><image class='head_bg_size' src="../../../static/images/home_bg@2x.png"></image></view>
		</view>

		<view class="swiper_Rotation">
			<uni-swiper-dot class="swiper_item">
				<swiper class="swiper-box">
					<swiper-item class="swiperItem" v-for="(imgs, index) in banners" :key="index">
						<view class="swiper-item"><image class="swiper_img" :src="imgUrl + imgs.img" mode="aspectFill" /></view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>

		<!-- 推荐商品 -->
		<view class="swiper_RecommendCommodity">
			<view class="title_area">推荐商品</view>
			<scroll-view class="floor-list" scroll-x>
				<view class="scoll-wrapper">
					<view class="floor-item" v-for="(item, index) in indexSupport" :key="index" @tap="enterListDetail(item.goodsId)">
						<image class="RC_item_img" :src="item.goodImg" mode="scaleToFill"></image>
						<view class="RC_item_title">{{ item.goodName }}</view>
						<view class="RC_item_price">
							<text class="price_fh">￥</text>
							<text class="price_jg">{{ item.price }}</text>
							<text class="price_dw">/辆</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 列表 -->
		<view class="list_commodity">
			<view class="title_area" @tap="goList()">
				附近商家
				<image src="../../static/images/more@3x.png"></image>
			</view>
			<view class="uni-list">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(list, index) in storeList" :key="index" v-if="list.examine==1" @tap="enterStore(list.userId)">
					<view class="uni-media-list">
						<image class="uni-media-list-logo" :src="list.portrait"></image>
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-title">{{ list.storeName }}</view>
							<view class="uni-media-list-text-center">
								<text>销量:</text>
								<text>{{ list.sell }}</text>
								<text class="text_distance">{{ list.distance }}km</text>
							</view>
							<view class="uni-media-list-text-center">
								<text>地址:</text>
								<text>{{ list.address }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
var dateUtils = require('@/common/util.js').dateUtils;
import config from '@/common/config.js';
import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import uniStatusBar from '@/components/uni-status-bar/uni-status-bar.vue';
export default {
	components: {
		uniSwiperDot,
		uniIcons,
		uniNavBar,
		uniStatusBar
	},
	data() {
		return {
			titleColor: '#fff',
			apiUrl: config.apiHost,
			banners: [],
			imgUrl: config.ImageUrl,
			role: 0,
			text: '我的订单',
			indexSupport: [],
			storeList: [],
			userName: '花花',
			userPhone: 15850519719
		};
	},
	onLoad(option) {
		if (option.userPhone) {
			this.userPhone = option.userPhone;
		}
		console.log(option);
		this.getUserInfos();
		this.getBanner();
		uni.setStorageSync('address', false);
		this.getIndexSupport();
		this.getList();
	},
	methods: {
		getUserInfos() {
			uni.request({
				url: this.apiUrl + '/api/user/selectUser',
				method: 'POST',
				contentType: 'application/jason',
				data: {
					userPhone: this.userPhone,
				},
				success: res => {
					this.role = res.data.data.role;
					if (this.role == 1) {
						this.text = '门店';
					} else if (this.role == 2) {
						this.text = '经销商';
					}
					uni.setStorageSync('userId', res.data.data.userId);
				}
			});
		},
		enterListDetail(goodId) {
			uni.navigateTo({
				url:'../bodyCarListDetail/bodyCarListDetail?address=1&goodId=' + goodId
				//url: '../listDetail/listDetail?address=1&goodId=' + goodId
			});
		},
		enterStore(storeId) {
			uni.navigateTo({
				url: '../store/storeInform?storeId=' + storeId
			});
		},
		getBanner() {
			uni.request({
				url: this.apiUrl + '/api/banner/selectBanner',
				method: 'POST',
				contentType: 'application/jason',
				data: {},
				success: res => {
					if (res.data.code == 200) {
						this.banners = res.data.data;
					}
				}
			});
		},
		getIndexSupport() {
			uni.request({
				url: this.apiUrl + '/api/goods/selectIndexSuport',
				method: 'POST',
				contentType: 'application/jason',
				data: {},
				success: res => {
					if (res.data.code == 200) {
						this.indexSupport = res.data.data;
					}
				}
			});
		},
		goStore() {
			console.log(this.role);
			if (this.role == 0) {
				uni.navigateTo({
					url: '../order/orderManage'
				});
			} else {
				uni.navigateTo({
					url: '../mine/mine-store?role=' + this.role
				});
			}
		},
		getList() {
			uni.request({
				url: this.apiUrl + '/api/store/selectStoreByType',
				method: 'POST',
				contentType: 'application/jason',
				data: {
					type: 3,
					userLat: uni.getStorageSync('lat'),
					userLon: uni.getStorageSync('lon')
					// userLat: 32.05838,
					// userLon: 118.79647
				},
				success: res => {
					if (res.data.code == 200) {
						this.storeList = res.data.data;
					}
				}
			});
		},
		goList() {
			uni.navigateTo({
				url: '../store/storeList'
			});
		}
	}
};
</script>

<style>
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #efeff4;
}

view {
	font-size: 28upx;
	line-height: inherit;
}

.role {
	width: 50%;
	position: absolute;
	left: 30upx;
	top: 90upx;
	z-index: 100000;
	color: #fff;
}

.beCome {
	width: 50%;
	position: absolute;
	right: 30upx;
	top: 20upx;
	z-index: 100000;
	color: #fff;
	text-align: right;
}

.uni-status-bar {
	display: block;
	width: 100%;
	height: 20px;
	height: var(--status-bar-height);
}

.uni-navbar__content {
	display: block;
	position: relative;
	width: 100%;
	background-color: rgba(255, 255, 255, 0);
	overflow: hidden;
}

.head_bg {
	width: 100%;
	height: 384rpx;
}

.head_bg image {
	width: 100%;
	height: 384rpx;
}

.example-body {
	position: fixed;
	width: 100%;
	top: 0upx;
	left: 0upx;
	z-index: 9999;
	padding: 0rpx 0rpx;
}

.title_area {
	width: 100%;
	height: 36px;
	float: left;
	line-height: 36px;
	font-weight: 600;
	padding-left: 3%;
	font-size: 1.1em;
	color: #222;
	position: relative;
}

.title_area image {
	width: 30upx;
	height: 30upx;
	position: absolute;
	right: 20upx;
	top: 20upx;
}

.swiper_Rotation {
	width: 94%;
	height: 150px;
	position: absolute;
	left: 3%;
	top: 165upx;
	border-radius: 5px;
}

.swiperItem {
	width: 100%;
	height: 100%;
	border-radius: 5px;
}

.scoll-wrapper {
	display: flex;
	align-items: flex-start;
}

.swiper_img {
	width: 100%;
	height: 120px;
	border-radius: 5px;
}

.swiper_RecommendCommodity {
	width: 94%;
	float: left;
	padding-top: 10upx;
	height: 380upx;
	margin-top: 40upx;
	margin-left: 3%;
	background: #fff;
	border-radius: 5px;
}

.list_commodity {
	width: 94%;
	height: auto;
	float: left;
	margin-top: 10px;
	margin-left: 3%;
	background: #fff;
	border-radius: 5px;
}

.floor-item {
	width: 30%;
	float: left;
	margin-left: 2.3%;
	margin-top: 0px;
	height: 160px;
}

.RC_item_img {
	width: 96%;
	height: 80px;
	float: left;
	margin-top: 5px;
	margin-left: 3%;
	border-radius: 5px;
	border: solid 2px #eb6c37;
}

scoll-wrapper {
	height: 100% !important;
}

scroll-view {
	display: block;
	width: 100%;
	height: 100%;
	padding-bottom: 20upx;
}

.RC_item_title {
	width: 96%;
	height: auto;
	line-height: 30px;
	float: left;
	margin-left: 3%;
	font-size: 0.9em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
}

.RC_item_price {
	width: 96%;
	height: 20px;
	line-height: 20px;
	float: left;
	margin-left: 3%;
	color: #ff4000;
}

.price_fh {
	font-size: 0.9rpx;
}

.price_dw {
	font-size: 0.9rpx;
}

.price_jg {
	font-weight: 600;
}

.uni-list {
	background-color: #ffffff;
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.uni-list:after {
	position: absolute;
	z-index: 10;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	content: '';
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
}

.uni-list::before {
	position: absolute;
	z-index: 10;
	right: 0;
	top: 0;
	left: 0;
	height: 1px;
	content: '';
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
}

.uni-list-cell {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.uni-list-cell-hover {
	background-color: #eee;
}

.uni-list-cell::after {
	position: absolute;
	z-index: 3;
	right: 0;
	bottom: 0;
	left: 30upx;
	height: 1px;
	content: '';
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
}

.uni-list .uni-list-cell:last-child::after {
	height: 0upx;
}

/* 图文列表 */
.uni-media-list {
	padding: 22upx 16upx;
	box-sizing: border-box;
	display: flex;
	width: 100%;
	flex-direction: row;
}

.uni-navigate-right.uni-media-list {
	padding-right: 74upx;
}

.uni-pull-right {
	flex-direction: row-reverse;
}

.uni-pull-right > .uni-media-list-logo {
	margin-right: 0upx;
	margin-left: 20upx;
}

.uni-media-list-logo image {
	height: 100%;
	width: 100%;
}

.uni-media-list-text-bottom {
	width: 100%;
	line-height: 30upx;
	font-size: 26upx;
	color: #8f8f94;
}

.uni-media-list-logo {
	width: 180upx;
	height: 160upx;
	margin-right: 20upx;
	border-radius: 5px;
}

.uni-media-list-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	overflow: hidden;
	height: auto;
}

.uni-media-list-text-top {
	width: 100%;
	line-height: 36upx;
	font-size: 30upx;
	height: 74upx;
	font-size: 28upx;
	overflow: hidden;
}

.uni-media-list-text-bottom {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.uni-media-list-text-title {
	width: 100%;
	height: 20px;
	font-size: 1em;
	font-weight: 600;
	color: #222;
}

.uni-media-list-text-center {
	width: 100%;
	height: 20px;
	float: left;
	color: #666;
	font-size: 0.9em;
}

.text_distance {
	display: block;
	float: right;
	margin-right: 3%;
}
</style>
